<template>
  <div>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const props = defineProps<{
  series: any
}>()

const chartContainer = ref<HTMLElement | null>(null);

// xData 数据
const xData = (() => {
  const data = [];
  for (let i = 1; i < 100; i++) {
    data.push(i);
  }
  return data;
})();


const initChart = () => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value);
    myChart.setOption({
      grid: {
        top: '20%',
        left: '10%', // 距离左边的距离
        right: '20%', // 距离右边的距离
        bottom: '30%', // 距离底部的距离
        borderColor: 'red',
      },

      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10
        },
        {
          start: 0,
          end: 10
        }
      ],
      xAxis: {
        max: 6,
        name: 'Flow',  // 在这里设置单位
        nameLocation: 'end',  // 将单位放在轴线末尾
        nameTextStyle: {
          color: '#fff', // 设置单位文本颜色为红色
        },
        axisLine: {
          show: false, // 隐藏 Y 轴的刻度线
        },
        axisLabel: {
          show: false, // 隐藏刻度值
        },
        axisTick: {
          show: false, // 隐藏刻度线
        },
        // 网格线样式设置在yAxis内部
        splitLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            type: 'dashed',
          },

        },
      },
      yAxis: {
        max: 4,
        type: 'value',
        name: 'NH3',  // 在这里设置单位
        nameLocation: 'end',  // 将单位放在轴线末尾
        nameTextStyle: {
          color: '#fff', // 设置单位文本颜色为红色
        },
        axisLine: {
          show: false, // 隐藏 Y 轴的刻度线
        },
        axisLabel: {
          show: false, // 隐藏刻度值
        },
        axisTick: {
          show: false, // 隐藏刻度线
        },
        // 网格线样式设置在yAxis内部
        splitLine: {
          show: true,
          lineStyle: {
            color: '#ccc',
            type: 'dashed',
          },
        },
      },
      series: [
        {
          symbolSize: 8,
          data: props.series.series1,
          type: 'scatter',
          lineStyle: {
            color: 'rgb(52, 125, 232)',
          },
        },
        {
          symbolSize: 8,
          data: props.series.series2,
          type: 'scatter',
          lineStyle: {
            color: 'rgb(75, 211, 239)',
          },
        },
        {
          symbolSize: 8,
          data: props.series.series3,
          type: 'scatter',
          lineStyle: {
            color: 'rgb(96, 60, 218)',
          },
        }
      ],
    });

    // 定义数据轮播的变量
    let a = 1;

    // 定义定时器，每2秒切换数据
    setInterval(() => {
      if (a == xData.length - 24) {
        a = 0;
      }
      myChart.dispatchAction({
        type: 'dataZoom',
        startValue: a,
        endValue: a + 24,
      });
      a++;
    }, 2000);
  }
}


onMounted(() => {
  initChart()
  // if (chartContainer.value) {
  //   const myChart = echarts.init(chartContainer.value);
  //   myChart.setOption(option);

  //   // 定义数据轮播的变量
  //   let a = 1;

  //   // 定义定时器，每2秒切换数据
  //   setInterval(() => {
  //     if (a == xData.length - 24) {
  //       a = 0;
  //     }
  //     myChart.dispatchAction({
  //       type: 'dataZoom',
  //       startValue: a,
  //       endValue: a + 24,
  //     });
  //     a++;
  //   }, 2000);
  // }
});
</script>
